import { useNavigate, useLocation } from 'react-router-dom'

const Alert = ({ msg }) => {
    const location = useLocation()
    const navigate = useNavigate()

    const clearAlert = () => {
        navigate(location.pathname, { state: null, replace: true })
    }

    return (
        <div style={{ marginTop: '10px' }} className="alert alert-success" role="alert">
            {msg}
            <div className="d-flex justify-content-end">
                <button 
                    type="button" 
                    className="btn-close" 
                    // data-bs-dismiss="alert" 
                    // aria-label="Close" 
                    onClick={clearAlert}
                ></button>
            </div>
        </div>
    )
}

export default Alert
